<template>
  <div>
    <el-tooltip :content="screenfullText" class="item" effect="dark" placement="bottom">
      <div @click="click">
        <svg-icon
          :icon-class="fullscreenIconClass"
          class="screenfull-svg" />
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  name: 'Screenfull',
  props: {
    width: {
      type: Number,
      default: 22
    },
    height: {
      type: Number,
      default: 22
    },
    fill: {
      type: String,
      default: '#48576a'
    }
  },
  data() {
    return {
      isFullscreen: false
    }
  },
  computed: {
    fullscreenIconClass() {
      return this.isFullscreen ? 'fullscreen-exit' : 'fullscreen'
    },
    screenfullText() {
      return this.isFullscreen ? '退出全屏' : '全屏'
    }
  },
  mounted() {
    this.isFullscreen = screenfull.isFullscreen
  },
  methods: {
    click() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      if (this.isFullscreen) {
        screenfull.exit()
      } else {
        screenfull.request()
      }
      this.isFullscreen = !this.isFullscreen
      // screenfull.toggle()
    }
  }
}
</script>

<style scoped>
.screenfull-svg {
  cursor: pointer;
  fill: #5a5e66;;
  width: 20px;
  height: 20px;
  vertical-align: 20px !important;
}
.item{
  height: 100%;
}
</style>
